{extend name="main"}
{block name="style"}
<style type="text/css">
    .flex-lable {
        width: 120px;
        color: #6c757d;
        text-align: right;
        padding-right: 10px;
    }

    .el-image-viewer__img {
        transition: all .3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
    }

    .w-400px {
        width: 400px !important;
    }

    .status {
        position: absolute;
        right: 5px;
        top: 5px;
        background-color: #FFF;
        border: solid 1px #FF6D06;
        color: #FF6D06;
        width: 60px;
        height: 20px;
        line-height: 18px;
        text-align: center;
        border-radius: 10px;
        z-index: 100;
    }

    .status.success {
        border: solid 1px #28a745;
        color: #28a745;
    }

    .status.danger {
        border: solid 1px #dc3545;
        color: #dc3545;
    }

    .checkbox-id {
        position: absolute;
        left: 5px;
        top: 5px;
    }

    .checkbox-id .el-checkbox__label {
        display: none;
    }

    .w-100px {
        width: 100px;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3 px-3 pb-3">
    <div class="mb-3">
        <el-tabs v-model="activeName"
            @tab-click="(tab,event)=>{window.location=tab.name=='demeanor'?'/company/demeanor':'#'}">
            <el-tab-pane label="企业LOGO" name="logo"></el-tab-pane>
            <el-tab-pane label="企业风采" name="demeanor"></el-tab-pane>
        </el-tabs>
    </div>
    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">

        <el-form-item label="搜索类型" prop="search_type" class="flex mb-0 pl-3">
            <el-select v-model="search.search_type" placeholder="请选择" class="w-100px">
                <el-option key="company_id" label="公司ID" value="company_id"></el-option>
                <el-option key="company_name" label="公司名" value="company_name"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status" class="flex mb-0 pl-3">
            <el-select v-model="search.status" placeholder="请选择" class="w-100px">
                <el-option key="all" label="全部" :value="null"></el-option>
                <el-option :key="0" label="待审核" :value="0"></el-option>
                <el-option :key="1" label="已通过" :value="1"></el-option>
                <el-option :key="2" label="已拒绝" :value="2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item :label="getSearchType()" prop="key" class="flex mb-0 pl-3">
            <el-input v-model="search.key" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>

        <el-form-item class="flex mb-0 pl-3">
            <el-button type="primary" @click="initHtml">查询</el-button>
            <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<div class="bg-white p-3">
    <div class="table-responsive py-3 flex flex-center">
        <el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div class="px-1"></div>
        <el-button type="success" size="mini" @click="setStatusALL(1)">批量通过</el-button>
        <el-button type="danger" size="mini" @click="setStatusALL(2)">批量拒绝</el-button>
    </div>
    <div class="row">
        <div class="col-auto mb-3" v-for="(v,index) in tableData">
            <div class="border position-relative" style="width:220px;">
                <el-checkbox v-model="multipleSelection" :label="v" class="checkbox-id text-center"></el-checkbox>
                <div class="status success small" v-if="v.status==1">已通过</div>
                <div class="status danger small" v-else-if="v.status==2">已拒绝</div>
                <div class="status info small" v-else-if="v.status=='loading'" :loading="true">加载中</div>
                <div class="status info small" v-else>待审核</div>

                <el-image style="width: 100%; height: 160px;cursor: pointer;" :src="v.after_logo" fit="cover"
                    @click="openImageViewer(index);"></el-image>
                <div class="bg-light text-center py-2 small flex flex-center px-1">
                    <div class="flex-1 text-truncate">{{v.company_name}}</div>
                    <div class="pl-1"></div>
                    <el-link type="success" @click="setStatus(v,1)" v-if="v.status==0">通过</el-link>
                    <div class="pl-1"></div>
                    <el-link type="danger" @click="setStatus(v,2)" v-if="v.status==0">拒绝</el-link>
                </div>
            </div>
        </div>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="search.page" :page-sizes="[10,50,100,200]" :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
    </div>
</div>
<div class="el-image-viewer__wrapper" style="z-index: 2000;" v-if="viewer.index !== null">
    <div class="el-image-viewer__mask"></div>
    <span class="el-image-viewer__btn el-image-viewer__close" @click="closeImageViewer">
        <i class="el-icon-circle-close h4 mb-0"></i>
    </span>
    <span class="el-image-viewer__btn el-image-viewer__prev" @click="viewerPrev">
        <i class="el-icon-arrow-left"></i>
    </span>
    <span class="el-image-viewer__btn el-image-viewer__next" @click="viewerNext">
        <i class="el-icon-arrow-right"></i>
    </span>
    <div class="el-image-viewer__btn el-image-viewer__actions" :class="{'w-400px':tableData[viewer.index].status===0}">
        <div class="el-image-viewer__actions__inner">
            <i class="el-icon-zoom-out" @click="viewerZoomOut"></i>
            <i class="el-icon-zoom-in" @click="viewerZoomIn"></i>
            <i class="el-image-viewer__actions__divider"></i>
            <i class="el-icon-full-screen" v-if="viewer.is_screen" @click="viewerIsScreen"></i>
            <i class="el-icon-c-scale-to-original" v-else @click="viewerIsScreen"></i>
            <i class="el-image-viewer__actions__divider"></i>
            <i class="el-icon-refresh-left" @click="viewerRotateLeft"></i>
            <i class="el-icon-refresh-right" @click="viewerRotateRight"></i>
            <i class="el-image-viewer__actions__divider" v-if="tableData[viewer.index].status===0"></i>
            <el-button-group class="text-nowrap" v-if="tableData[viewer.index].status===0">
                <el-button type="success" size="mini" @click="setStatus(tableData[viewer.index],1,viewerNext())"
                    icon="el-icon-check" round></el-button>
                <el-button type="danger" size="mini" @click="setStatus(tableData[viewer.index],2,viewerNext())"
                    icon="el-icon-close" round></el-button>
            </el-button-group>
        </div>
    </div>
    <div class="el-image-viewer__canvas">
        <img :src="tableData[viewer.index].url" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage"
            @mousewheel="viewerMousewheel">
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var loading = null;
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            labelPosition: 'right',
            viewer: {
                index: null,
                scale: 1,
                rotate: 0,
                isDown: false,
                is_screen: true
            },
            multipleSelection: [],
            multipleSelectionIndex: 0,
            indeterminate: false,
            checkAll: false,
            activeName: 'logo',
            search: {
                status,
                page: 1,
                // status: null,
                status:{:request()->get('status',"\'all\'")},
                total: 0,
                pageSize: 10
            }, 
            tableData: [],
        },
        watch: {
            view: XYBase.viewWatch,
            multipleSelection(val, oldVal) {
                var count = val.length;
                var allCount = this.tableData.length;
                this.indeterminate = count > 0 && count !== allCount;
                this.checkAll = count > 0 && count === allCount;
            },
        },
        created() {
            XYBase.created(this);
        },
        methods: {
            checkboxT(row, index) {
                if (row.status == 0) {
                    return true;
                } else {
                    return false;
                }
            },
            handleCheckAllChange(val) {
                if (val) {
                    this.multipleSelection = this.tableData;
                } else {
                    this.multipleSelection = [];
                }
            },
            getSearchType() {
                var text = '公司ID';
                switch (this.search.search_type) {
                    case 'company_id':
                        text = '公司ID';
                        break;
                    case 'company_name':
                        text = '公司名';
                        break;
                }
                return text;
            },
            getViewerStyle() {
                var style = {
                    transform: 'scale(' + this.viewer.scale + ') rotate(' + this.viewer.rotate + 'deg)'
                };
                if (this.viewer.is_screen) {
                    style.maxHeight = '100%';
                    style.maxWidth = '100%';
                }
                return style;
            },
            closeImageViewer() {
                document.body.style = '';
                this.viewer.index = null;
            },
            openImageViewer(index) {
                document.body.style = "overflow: hidden;padding-right:17px;";
                this.viewer.index = index;
                this.viewer.scale = 1;
                this.viewer.rotate = 0;
                this.viewer.is_screen = true;
            },
            viewerMousewheel(event) {
                if (event.deltaY > 0) {
                    if (this.viewer.scale <= 0.2) return;
                    this.viewer.scale = this.viewer.scale - 0.02;
                } else {
                    this.viewer.scale = this.viewer.scale + 0.02;
                }
            },
            viewerZoomOut() {
                if (this.viewer.scale <= 0.3) return;
                this.viewer.scale = this.viewer.scale - 0.2;
            },
            viewerZoomIn() {
                this.viewer.scale = this.viewer.scale + 0.2;
            },
            viewerIsScreen(index) {
                this.viewer.scale = 1;
                this.viewer.rotate = 0;
                this.viewer.is_screen = !this.viewer.is_screen;
            },
            viewerRotateLeft() {
                this.viewer.rotate = this.viewer.rotate - 90;
            },
            viewerRotateRight() {
                this.viewer.rotate = this.viewer.rotate + 90;
            },
            viewerNext() {
                var index = this.viewer.index;
                if (this.tableData[this.viewer.index + 1])
                    this.viewer.index++;
                else
                    XYBase.msg('已经是最后一张了');
            },
            viewerPrev() {
                var index = this.viewer.index;
                if (this.tableData[this.viewer.index - 1])
                    this.viewer.index--;
                else
                    XYBase.msg('已经是第一张了');
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                this.search.page = 1;
                this.search.pageSize = val;
                this.initHtml();
            },
            setStatus(row, status, callback) {
                if (row.status == 'loading') return;
                var oldStatus = row.status;
                row.status = 'loading';
                $.ajax({
                    url: '/company/logo/setStatus/' + row.id + '/' + status,
                    type: 'get',
                    data: {},
                    dataType: 'json',
                    error: function (err) {
                        row.status = oldStatus;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (ret) {
                        row.status = oldStatus;
                        if (ret) {
                            if (ret.code === 0) {
                                row.status = status;
                                row.update_time = ret.time;
                                XYBase.success(ret.msg);
                                if (typeof callback == 'function')
                                    callback();
                            } else XYBase.msg(ret.msg);
                        } else XYBase.error(XYBase.config.system_network_error);
                    }
                })
            },
            setStatusALL(status) {
                var _this = this;
                if (_this.multipleSelection.length < 1) return;
                loading = XYBase.openloading();
                _this.multipleSelectionIndex = 0;
                _this.setStatusALLAjax(status);
            },
            setStatusALLAjax(status) {
                var _this = this;
                var D = _this.multipleSelection[_this.multipleSelectionIndex];
                if (D) {
                    loading.setText((_this.multipleSelectionIndex + 1) + '/' + _this.multipleSelection.length);
                    $.ajax({
                        url: '/company/logo/setStatus/' + D.id + '/' + status,
                        type: 'get',
                        data: {},
                        dataType: 'json',
                        error: function (err) {
                            loading.close();
                            _this.multipleSelectionIndex = 0;
                            // _this.$refs.tableList.clearSelection();
                        },
                        success: function (ret) {
                            if (ret) {
                                if (ret.code === 0) {
                                    _this.multipleSelection[_this.multipleSelectionIndex].status = status;
                                    _this.multipleSelection[_this.multipleSelectionIndex].update_time = ret.time;
                                    _this.multipleSelectionIndex++;
                                    _this.setStatusALLAjax(status);
                                } else {
                                    _this.multipleSelectionIndex++;
                                    _this.setStatusALLAjax(status);
                                }
                            } else {
                                XYBase.error(XYBase.config.system_network_error);
                                loading.close();
                                _this.multipleSelectionIndex = 0;
                                // _this.$refs.tableList.clearSelection();
                            }
                        }
                    })
                } else {
                    loading.close();
                    _this.multipleSelectionIndex = 0;
                    // _this.$refs.tableList.clearSelection();
                    window.location.reload();
                }
            },
            handleCurrentChange(val) {
                this.search.page = val;
                this.initHtml();
            },
            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        // console.log(err);
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (res) {
                        console.log(res);
                        _this.search.ajax = false;
                        if (res) {
                            if (res.code == 0) {
                                _this.search.total = res.data.total;
                                _this.tableData = res.data.data;
                            } else {
                                XYBase.msg(res.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function () {
        vm.initHtml();
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}